import { MouseEvent, SetStateAction, memo, useState } from 'react';
import Logs from './Logs';
import LogImage from './LogImage';
import { TextWidget } from '@inbiz/react';
import { useInbizRouter } from '@inbiz/hooks';
import './index.less';

const ProcessLog = memo((props: any) => {
  const { type, processId, instanceId } = props;
  const [show, $show] = useState('1');
  const [processLogData, setProcessLogData] = useState([]);
  const router = useInbizRouter();
  let _query = router.location.query;
  let _instanceId = instanceId || _query?.instanceId || '';
  let _processId = processId || _query?.processId || '';

  const logCompoennt = () => {
    const handleClick = (e: MouseEvent<HTMLSpanElement, MouseEvent>, value: SetStateAction<string>) => {
      $show(value);
      e.stopPropagation();
    };
    if (type == 'detail') {
      return (
        <div className={`${type ? 'detaillog' : 'logs'} ${'commonLog'} `} id="log">
          <Logs hasButton={props?.hasButton} setProcessLogData={setProcessLogData} show={true}/>
        </div>
      )
    } else {
      return (
        <div className={`${type ? 'detaillog' : 'logs'} ${'commonLog'} `} id="log">
          <div className={'titles'}>
            <span className={show == '1' ? 'activeTitle' : ''} onClick={(e) => { handleClick(e, '1') }}>
              <TextWidget>WapProcessLog.processLog</TextWidget>
            </span>
            <span className={show == '2' ? 'activeTitle' : ''} onClick={(e) => { handleClick(e, '2') }}>
              <TextWidget>WapProcessLog.processLogImg</TextWidget>
            </span>
          </div>
          <Logs hasButton={props?.hasButton} setProcessLogData={setProcessLogData} show={show == '1'}/>
          <LogImage processId={_processId} instanceId={_instanceId} processLogData={processLogData} show={show == '2'}/>
        </div>
      );
    }
  };

  return (
    <>
      {logCompoennt()}
    </>
  );
});

export default ProcessLog;
